<template>
  <div class="car-manage">
      
      <!-- <div class="autospace"></div> -->

      <el-row :gutter="20" v-loading="loading">

        <el-col :xs="24" :sm="16" :md="12" :lg="7" :xl="7">
          <div class="tree-store">
                <div class="store-category">
                    <!-- 一级分类 -->
                    <div class="first-category" @click="openFirstCategory()">
                        <i :class="[firstIsView? 'el-icon-arrow-down':'el-icon-arrow-right']"></i>
                        <span class="category-name">全部类别</span>
                    </div>
                    <!-- 二级分类 -->
                    <transition>
                      <ul v-if="firstIsView" name="areawrap">
                          <li v-for="item in carCategoryFirst" :key="item.categoryId">
                              <i @click="openTwoCate(item.categoryId)" :class="[firstActive.indexOf(item.categoryId) != -1? 'el-icon-arrow-down':'el-icon-arrow-right']"></i>
                              <span @click="openTwoCate(item.categoryId)" class="category-name">{{item.categoryName}}</span>
                              <span>
                                <el-button style="margin-left:30px;height:24px;line-height:0px;border:0" 
                                  size="mini" icon="el-icon-plus" @click="addCarTwoCate(item.categoryId)"
                                  v-if="firstActive.indexOf(item.categoryId) != -1">
                                  添加二级分类
                                </el-button>
                              </span>

                              <ul v-if="firstActive.indexOf(item.categoryId) != -1">
                                  <li v-for="twoitem in item.carCategorytwos" :key="twoitem.categoryTwoId"
                                      @mouseover="viewBtn(twoitem)" @mouseleave="unviewbtn">
                                      <span style="margin-left:-10px" @click="clickTwoCate(twoitem.categoryTwoId)" class="depart-name">{{twoitem.categoryTwoName}}</span>
                                      <div v-if="viewbtnvis == twoitem.categoryTwoId" class="depart-btn">
                                        <el-button size="mini" icon="el-icon-edit" @click="editTwoCate(twoitem)">修改</el-button>
                                        <el-button size="mini" icon="el-icon-delete" @click="delTwoCate(twoitem.categoryTwoId)">删除</el-button>
                                      </div>
                                  </li>
                              </ul>
                          </li>
                      </ul>
                    </transition>                    
                </div>
          </div>
        </el-col>

        <el-col :xs="24" :sm="24" :md="24" :lg="17" :xl="17" v-loading="loading">

            <el-row :gutter="10" style="margin-bottom:10px" v-if="openFirstCate">
                <el-col :span="24">
                    <el-button type="primary" size="mini" 
                    style="width:100px;" icon="el-icon-plus" @click="addFirstCategory">新增类别</el-button>
                </el-col>
            </el-row>

            <!-- <el-row :gutter="16" style="line-height:40px;margin-bottom:10px" v-if="openTwoCateVis">
                <el-col :span="3">
                    <div class="label-wrap category">
                        <label for="">二级分类编号：</label>
                    </div>
                </el-col>
                <el-col :span="5">
                    <el-input v-model="categoryNumber" size="small" placeholder="请输入编号" style="width:100%"></el-input>
                </el-col>

                <el-col :span="3">
                    <div class="label-wrap category">
                        <label for="">二级分类名称：</label>
                    </div>
                </el-col>
                <el-col :span="5">
                    <el-input v-model="categoryName" size="small" placeholder="请输入名称" style="width:100%"></el-input>
                </el-col>

                <el-col :span="8">
                    <el-button type="primary" size="mini" icon="el-icon-search" style="width:80px" @click="searchProdCate">搜索</el-button>
                </el-col>

            </el-row> -->



          <el-table :data="carCategoryFirst" border style="width: 100%" v-if="openFirstCate">
            <el-table-column prop="categoryNumber" label="类别编号"></el-table-column>
            <el-table-column prop="categoryName" label="类别名称"></el-table-column>
            <el-table-column prop="categoryRemark" label="备注"></el-table-column>
            <el-table-column prop="categoryTime" label="创建时间"></el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope" v-if="openFirstCate">
                <el-button size="mini" icon="el-icon-edit" @click="editFirstCate(scope.row)">修改</el-button>
                <el-button size="mini" icon="el-icon-delete" @click="delFirstCate(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-table :data="carTwoCategory" border style="width: 100%" v-if="openTwoCateVis">
            <el-table-column prop="categoryTwoNumber" label="二级类别编号"></el-table-column>
            <el-table-column prop="categoryTwoName" label="二级类别名称"></el-table-column>
            <el-table-column label="操作" width="350">
              <template slot-scope="scope" v-if="openTwoCateVis">
                <el-button size="mini" icon="el-icon-plus" @click="addCarInfo(scope.row)">添加车辆</el-button>
                <el-button size="mini" icon="el-icon-edit" @click="editTwoCate(scope.row)">修改</el-button>
                <el-button size="mini" icon="el-icon-delete" @click="delTwoCate(scope.row.categoryTwoId)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-table :data="carlist" border style="width: 100%" v-if="viewCarvis">
            <el-table-column label="车辆图片" width="90">
              <template slot-scope="scope" v-if="viewCarvis">
                <div>
                  <img style="width:70px;height:70px;margin-top:5px" :src="scope.row.carImg" alt="">
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="carNumber" label="车辆牌照"></el-table-column>
            <!-- <el-table-column prop="categoryTwoName" label="车辆细类"></el-table-column> -->
            <el-table-column prop="carReamrks" label="备注"></el-table-column>
          </el-table>  

        </el-col>

      </el-row>

    <addfirstcate :addTwoId='addTwoId' :checkCategory="checkCategory" :addFirstCate.sync="addFirstCate"></addfirstcate>
    <addtwocate :categoryId='categoryId' :checkCategory="checkCategory" :addtwoDialog.sync="addtwoDialog"></addtwocate>
    <addcar :selectTwoCate="selectTwoCate" :dialogInfo.sync="dialogInfo"></addcar>
  </div>
</template>

<script>
import { GetAllCarCate, DelCarFirstCate, DelCarTwoCate, GetCarsByCate } from '@/api/car';
import addfirstcate from './addfirstcate';
import addtwocate from './addtwocate';
import addcar from './addcar';
export default {
  name: 'supplier',
  components: {
      addfirstcate,
      addtwocate,
      addcar
  },
  data() {
    return {
        dialogInfo: false, // 打开新增车辆
        loading: true,
        categoryName: '',
        categoryNumber: '',
        addFirstCate: false,
        checkCategory: {},
        firstIsView: true,  // 全部类别切换
        openFirstCate: true,  // 点击全部类别切换右边列表
        openTwoCateVis: false, // 点击一级类别切换右边列表
        viewCarvis: false,  // 点击二级类别切换右边列表
        firstActive: [],
        addTwoId: null,
        carCategoryFirst: [],
        carTwoCategory: [],
        viewCarvis: false,
        addtwoDialog: false, // 打开二级分类弹框
        categoryId: null, // 新增二级分类时传入一级Id
        viewbtnvis: false,
        carlist: [], // 点击二级分类获取车辆
        selectTwoCate: [], // 二级分类添加车辆传入信息
        limitTwoId: null,
    }
    
  },
  watch: {
    addFirstCate(newVal) {
      if (!newVal) {
        this.getCarCates()
      }
    },
    addtwoDialog(newVal) {
      if (!newVal) {
        this.getCarCates()
        this.openTwoCate(this.limitTwoId);
        this.openTwoCate(this.limitTwoId);
      }
    },
  },
  methods:{
    addFirstCategory() {
      this.addFirstCate = true;
      this.checkCategory = null;
    },
    delFirstCate(el) {
      this.$confirm('此操作将删除当前分类, 是否继续?')
      .then( () => {
        DelCarFirstCate(el.categoryId).then( res => {
          let data = res.data
          this.$message({
              message: data.msg,
              type: 'success'
          })
          this.getCarCates()
        })
      }).catch(() => {
        return
      })
    },
    editFirstCate(data) {
        this.addFirstCate = true;
        this.checkCategory = data;
    },
    // 获取所有装备分类
    getCarCates() {
      GetAllCarCate().then( res => {
        this.carCategoryFirst = res.data;
        this.carCategoryFirst.forEach( e => {
          return e.categoryTime = this.formatDate(e.categoryTime)
        })
        this.loading = false
      })
    },
    clickTwoCate(id) {
      this.loading = true;
      GetCarsByCate(id).then( res => {
        this.carlist = res.data;
        this.openFirstCate = false;
        this.openTwoCateVis = false;
        this.viewCarvis = true;
        this.loading = false
      })
    },
    // 搜索装备类别
    searchProdCate() {
      let reqData = {
        categoryNumber: this.categoryNumber,
        categoryName: this.categoryName
      }
      SearchProdCate(reqData).then( res => {
        this.carCategoryFirst = res.data.info;
        this.carCategoryFirst.forEach( e => {
          return e.categoryTime = this.formatDate(e.categoryTime)
        })
      })
    },
    // 打开一级分类
    openFirstCategory() {
      this.viewCarvis = false;
      this.openTwoCateVis = false;
      this.openFirstCate = true;
      this.firstIsView = !this.firstIsView;
    },
    openTwoCate(id) {
      this.carTwoCategory = this.carCategoryFirst.filter(e => e.categoryId == id)[0].carCategorytwos
      this.openTwoCateVis = true;
      this.viewCarvis = false;
      this.openFirstCate = false;
      if (this.firstActive.indexOf(id) == -1) {
        this.firstActive.push(id);
      } else {
        let activeid = this.firstActive.indexOf(id);
        this.firstActive.splice(activeid, 1);
      }
    },
    // 添加二级分类
    addCarTwoCate(id) {
      this.categoryId = id;
      this.addtwoDialog = true;
      this.checkCategory = null;
    },
    // 修改二级分类
    editTwoCate(item) {
      this.addtwoDialog = true;
      this.checkCategory = item;
      this.limitTwoId = item.categoryId;
    },
    delTwoCate(id) {
      this.$confirm('此操作将删除当前分类, 是否继续?')
      .then( () => {
        DelCarTwoCate(id).then( res => {
          let data = res.data
          this.$message({
              message: data.msg,
              type: 'success'
          })
          this.getCarCates()
        })
      }).catch(() => {
        return
      })
    },
    viewBtn(item) {
      this.viewbtnvis = item.categoryTwoId;
    },
    unviewbtn() {
      this.viewbtnvis = ''
    },
    // 添加车辆
    addCarInfo(item) {
        this.dialogInfo = true;
        this.selectTwoCate = item;
    }
  },

  mounted() {
    this.getCarCates()
  }
}
</script>

<style lang="scss" scoped>
@import '../../styles/config.scss';

  .label-wrap {
    &.category { @include labelwrap(left,110,40); }
    &.date {
      @include labelwrap(center,50,40); }
    &.keyword { @include labelwrap(right,110,40); }
  }
  .autospace {
    height: 30px;
  }

  .tree-store {
      width: 100%;
      // min-height: 500px;
      border-right: 1px dashed #e0e0e0;
      color: #333;
  }
  .store-category {
    line-height: 30px;
    position: relative;
    cursor: pointer;
    &:first-child:before {
      top: 20px
    }
    &:last-child:before {
      bottom: 21px
    }
    &:before {
        content: '';
        position: absolute;
        left: 27px;
        top: 0;
        bottom: 0;
        width: 32px;
        // border-left: 1px dotted #000;
      }
    .first-category {
      line-height: 30px;
      padding-left: 20px;
      position: relative;
      i {
          color: #999;
          font-weight: 700;
      }
      
    }
    li {
      list-style: none;
      padding-left: 40px;
      font-size: 14px;
      position: relative;
      margin-left: 10px;
      // display: flex;
      // &:hover {
      //   .depart-btn {
      //     display: block;
      //   }
      // }
      &:before {
        content: '';
        position: absolute;
        left: 20px;
        top: 15px;
        width: 20px;
        // border-bottom: 1px dotted #000;
      }
      i {
          color: #999;
          font-weight: 700;
      }
    }
    // li,h4 {
    //   &:hover {
    //     background-color: #f3f3f3;
    //     .button-wrap {
    //       display: block;
    //     }
    //   }
    // }
  }
  .category-name {
      margin-left: 5px;
  }
  .category-name:hover {
      color: #409EFF;
  }
  .depart-name:hover {
    color: #409EFF;
  }
  .depart-btn {
    position: absolute;
    top: 0;
    right: 20px;
    button {
      height: 24px;
      line-height: 10px;
       border: 0;
    }
  }

  // .areawrap-enter-active,.areawrap-leave-active{
  //     transition: opacity 1s;
  // }
  .areawrap-enter-active{
      animation: bounce-in 2s;
  }
  .areawrap-leave-active{
      animation: bounce-in 2s reverse;
  }
  @keyframes bounce-in {
      10%{
          transform: scale(0);
      }
      50%{
          transform: scale(0.5);
      }
      100%{
          transform: scale(1);
      }
  }
  
</style>
  
